<template>
    <div class="date">
       <div class="headerFix">
           <div class="header">
               <div @click="$router.go(-1)" class="header-btnLeft"><img src="../assets/back-btn.png"></div>
               <h1 class="header-title">选择出发日期</h1>
               <div class="header-btnRight"></div>
           </div>
       </div>
        <div class="date-wrap">
            <div class='date-wrap-week'>
                <div class='date-wrap-week-list'>
                    <div v-for="(item,index) in week">
                        {{item}}
                    </div>
                </div>
            </div>
            <div v-for="(item,index) in dates">
                <span class="date-wrap-title">{{item.title}}</span>
                <div class="date-wrap-box">
                    <div v-for="(item2,index2) in item.days" @click="selectDay(item2.today)" class="date-wrap-box-item"
                    :class="{'active': item2.today==dateBegin || item2.today==dateEnd, 'bg':getDaysByDateString(dateBegin,item2.today)>1 && getDaysByDateString(item2.today,dateEnd)>1}"
                    >
                        <div class="day">{{item2.day}} </div>
                        <div class="tag" v-if="item2.today==dateBegin">去程</div>
                        <div class="tag" v-if="item2.today==dateEnd">返程</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    import storage from '../store/localstorage'
    export default {
        name: "Formulate",

        data() {
            return {
                dateBegin:'',
                dateEnd:'',
                dayNum:0,
                formulate: '',
                week: ['日', '一', '二', '三', '四', '五', '六'],
                dates: [],
            }
        },
        methods: {
            selectDay(today) {
                var dayNum=0;
                if(!this.dateBegin){
                    this.dateBegin=today;
                }else if(this.dateBegin && this.dateBegin==today ){
                    this.dateBegin='';
                    this.dateEnd='';
                }else if(this.dateEnd && this.dateEnd==today ){
                    this.dateEnd='';
                }else{
                    dayNum=this.getDaysByDateString(this.dateBegin,today);
                    if(dayNum > 0 ){
                        this.dateEnd=today;
                        this.dayNum=dayNum;
                        this.formulate=storage.get('formulate');
                        this.formulate.dateBegin=this.dateBegin;
                        this.formulate.dateEnd=this.dateEnd;
                        this.formulate.dayNum=this.dayNum;
                        storage.set('formulate',this.formulate);
                        this.$router.push('/formulate');
                    }else{
                        Toast({message: '返程不得早于出发日期',duration: 1500})
                    }
                }
            },

            // 计算时间差
            getDaysByDateString(dateString1,dateString2){
                if(!dateString1 || !dateString2) return  -1;
                var  startDate=Date.parse(dateString1.replace('/-/g','/'));
                var  endDate=Date.parse(dateString2.replace('/-/g','/'));
                var diffDate=(endDate-startDate)+1*24*60*60*1000;
                var days=diffDate/(1*24*60*60*1000);
                //alert(diffDate/(1*24*60*60*1000));
                return  days;
            },
            //初始化日期
            initDate() {
                var nowDate = new Date();
                var year = nowDate.getFullYear();
                var month = nowDate.getMonth();
                for (let i = 0; i < 12; i++) {
                    var addMonth = month + i;
                    if (addMonth > 11) {
                        var addYear = year + 1;
                        addMonth = addMonth-12
                    } else {
                        var addYear = year;

                    }
                    this.eachDay(addYear,addMonth);
                }
            },
            //遍历日期
            eachDay(year, month) {
                var _that = this;
                //全部时间的月份都是按0~11基准，显示月份才+1
                let dateArr = []; //需要遍历的日历数组数据
                let arrLen = 0; //dateArr的数组长度
                let startWeek = new Date(year + '/' + (month+1) + '/' + 1).getDay(); //目标月1号对应的星期
                let dayNums = new Date(year, month+1, 0).getDate(); //获取目标月有多少天
                let obj = {};
                let num = 0;
                arrLen = startWeek + dayNums;
                //arrLen = dayNums;
                for (let i = 0; i < arrLen; i++) {
                    if (i >= startWeek) {
                        num = i - startWeek + 1;
                        let TodayText = new String(year + '-');
                        TodayText += (month + 1) < 10 ? '0' + (month + 1) : month + 1;
                        TodayText += '-'
                        TodayText += (num < 10) ? '0' + num : num;
                        obj = {
                            today: TodayText,
                            month : month + 1,
                            day: num
                        }
                    } else {
                        obj = {};
                    }
                    dateArr[i] = obj;
                }
                this.dates.push({title:year+'年'+ (month + 1) +'月',days:dateArr})
            },

        },
        mounted() {
            this.initDate();
            this.formulate = storage.get('formulate');
            if (this.formulate) {
                this.dateBegin = this.formulate.dateBegin || '';
                this.dateEnd = this.formulate.dateEnd || '';
                this.dayNum = this.formulate.dayNum || 0;
            }
        }

    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }
    .headerFix{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height:rpx(126) ;
    }
    .header {
        display: flex;
        align-items: center;
        padding: rpx(30);
        justify-content: space-between;
        background: $color0;
        border-bottom: 1px solid $color2;

        &-btnLeft {
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);

            img {
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after {
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title {
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }
    .date {
        position: relative;
        min-height: 100%;
        &-wrap {
            padding-top: rpx(190);
            &-title {
                display: inline-block;
                margin-top: rpx(40);
                padding: rpx(10) rpx(40);
                background: $color3;
                -webkit-border-radius: 0 rpx(8) rpx(20) 0;
                -moz-border-radius: 0 rpx(8) rpx(20) 0;
                border-radius: 0 rpx(8) rpx(20) 0;
                color: $color0;
            }
            &-week {
                position: fixed;
                top: rpx(126);
                left: 0;
                right: 0;
                height: rpx(64);
                background: $color0;
                &-list {
                    display: flex;
                    border-bottom: solid 1px $color2;
                    align-items: center;
                    div {
                        flex: 1;
                        color: $color5;
                        font-size: rpx(26);
                        text-align: center;
                        height: rpx(64);
                        line-height: rpx(64);
                    }
                }
            }
            &-box {
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                &-item {
                    width: 14.285%;
                    height: rpx(100);
                    text-align: center;
                }
                .day{
                    padding-top: rpx(20);
                    font-size: rpx(32);
                }
                .active{
                    background:url(../assets/formulate_ok.png) no-repeat bottom right $color3;
                    color: #fff;
                }
                .tag{
                    text-align: center;
                    font-size: rpx(24);
                }
                .bg{
                    background:$color7;
                }
            }
        }
    }
</style>

